<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>蠢货们的聊天室</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            width: 100%;
        }
        h2 {
            float: left;
            width: 100%;
            text-align: center;
            font-size: 3rem;
            font-weight: normal;
            color: #104E8B;
        }
        ul {
            position: relative;
            left: 50%;
            margin-left: -325px;
            float: left;
            display: block;
            list-style:none;
            width: 650px;
            height: 200px;
            background: #EEE;
        }
        .room-block {
            float: left;
            width:100%;
            height: 35px;
            margin: .5rem 0 0 0;
            line-height: 35px;
            border-bottom: 1px solid #AAA;
        }
        a {
            text-decoration:none;
            color: #104E8B;
            cursor: pointer;
            display: inline;
        }
        a:hover {
            color: #104E8B;
        }
        .room-block a {
            display: inline-block;
            width:auto;
            height: 100%;
            line-height: 35px;
            font-weight: bold;
            margin-left: 1rem;
        }
        .room-block span {
            display: inline-block;
            width: auto;
            height: 100%;
            margin-left: 1rem;
            color: #333;
        }
        .bar {
            float: left;
            width:100%;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
        .bar a {
            margin: 0 1rem 0 1rem;
        }
        </style>
    </head>
    <body>
        <h2><i>选择房间</i></h2>
        <ul><!-- ajax 加载区 --></ul>
    </body>

    <script>
    Call = function(json) {
        if (window.XMLHttpRequest)
            var xhr = new XMLHttpRequest();
        else
            var xhr = new ActiveXObject("Microsoft.XMLHTTP");
        if (json.cover) {
            this.cover("on");
        }
        xhr.onerror = function(e) {
            console.log('sugar request failed');
            console.log(e);
        }
        xhr.ontimeout = function() {
            throw new Error('sugar request timeout');
        }
        var dStr = "";
        let datakey;
        for (datakey in json.data) {
            dStr += "&"+ datakey+ "="+ json.data[datakey];
        }
        var method = json.method.toUpperCase();
        if (method == "GET") {
            /**
                * assembling url params
                */
            if (json.url.indexOf("?") < 0) {
                json.url = json.url + "?" + dStr.substr(1);
            } else {
                json.url = json.url + dStr;
            }
        }
        xhr.open(method, json.url, true);
        try {
            xhr.withCredentials = json.withCookie == false ? false : true;
        } catch (e) {
            xhr.withCredentials = false;
        }
        var defaultType = "application/x-www-form-urlencoded;charset=UTF-8";
        xhr.setRequestHeader("Accept", "application/json");
        xhr.setRequestHeader("Content-Type", defaultType);
        xhr.responseType = json.type;
        let key;
        for (key in json.headers) {
            xhr.setRequestHeader(key, json.headers[key]);
        }
        if (method == "GET") {
            xhr.send(null);
        } else {
            let subst = dStr;
            xhr.send(subst);
        }
        var that = this;
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    if (json.cover) {
                        that.cover("off");
                    }
                    let calldata = xhr.response == "undefined" ? xhr.responseText : xhr.response;
                    json.success(calldata);
                    return 0;
                }
            }
        }
    };
    var ul = document.querySelector("ul");
    Call({
        url: "/roomlist",
        method: "GET",
        type: "json",
        data: {
            mark: "null"
        },
        success: function(data) {
            console.log(data);
            var once;
            for (once in data) {
                var li = document.createElement("li");
                li.className = "room-block";
                var a = document.createElement("a");
                a.href = "/room?name="+ data[once].room
                a.innerText = "房间 "+ data[once].room
                var span = document.createElement("span");
                span.innerText = "("+ data[once].len+ "人在线)";
                li.appendChild(a);
                li.appendChild(span);
                ul.appendChild(li);
            }
        }
    })

    </script>
</html>